<template>
  <div class="pro_info">
    <div class="top">
      <div class="left" >
        <div class="kuang"> 
			<!-- 点击显示所有列表 -->

		<div style="color:white" @click="handleAll()"> 电厂1 更多>></div>
    

	<p style="color:white">总数: 21台 开门:4台 关门: 17台</p>
		<!-- 循环lists,0为开门,1为关门 -->
			<el-row>
				<el-col :span='3' v-for = "item in lists" :key="(item.id)"   style="color:white;font-size: 20px;margin-top:10px" @click="handleRead(item.id,item.state)" >
          <div :class="item.state==0?'':'headerBox'" style="font-size: 10px;text-align: center;width: 40px;">{{item.id}}号</div>
					<img class="my-image" src ="../assets/img/ysb.png" alt="" v-if="item.state==0" />
				</el-col>
			</el-row>
        </div>
      </div>
      <div class="right">
        <div class="kuang"> 
   <div style="color:white">
            <div style="color:white" @click="handleAll1()"> 电厂2 更多>></div>
	<p style="color:white">总数: 9台 开门:1台 关门: 8台</p>
		<!-- 循环lists,0为开门,1为关门 -->
			<el-row>
				<el-col :span='3' v-for = "item in lists2"  :key="(item.id)"   style="color:white;font-size: 20px;margin-top:10px" @click="handleRead2(item.id,item.state)" >
          <div :class="item.state==0?'':'headerBox'"  style="font-size: 10px;text-align: center;width: 40px;">{{item.name}}</div>
					<img class="my-image" src ="../assets/img/ysb.png" alt="" v-if="item.state==0" />
				</el-col>
			</el-row>
        </div>
      </div>
      <div class="right">
        <div class="kuang"> 
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="kuang"> 
   <div style="color:white">
            <div style="color:white">
            <div style="color:white" @click="handleAll2()"> 电厂3 更多 >></div>
	<p style="color:white">总数: 12台 开门:2台 关门: 10台</p>
		<!-- 循环lists,0为开门,1为关门 -->
			<el-row>
				<el-col :span='3' v-for = "item in lists3"  :key="(item.id)"   style="color:white;font-size: 20px;margin-top:10px" @click="handleRead3(item.id,item.state)" >
          <div :class="item.state==0?'':'headerBox'"  style="font-size: 10px;text-align: center;width: 40px;">{{item.name}}</div>
					<img class="my-image" src ="../assets/img/ysb.png" alt="" v-if="item.state==0" />
				</el-col>
			</el-row>
        </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="kuang"> 
          <div style="color:white">
            <div style="color:white">
            <div style="color:white" @click="handleAll3()"> 电厂4 更多>></div>
	<p style="color:white">总数: 11台 开门:2台 关门: 9台</p>
		<!-- 循环lists,0为开门,1为关门 -->
			<el-row>
				<el-col :span='3' v-for = "item in lists4"  :key="(item.id)"   style="color:white;font-size: 20px;margin-top:10px" @click="handleRead4(item.id,item.state)" >
          <div :class="item.state==0?'':'headerBox'"  style="font-size: 10px;text-align: center;width: 40px;">{{item.name}}</div>
					<img class="my-image" src ="../assets/img/ysb.png" alt="" v-if="item.state==0" />
				</el-col>
			</el-row>
        </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>




<script  setup lang="ts" name="dashboard">
import { reactive,ref } from "vue";
import { Door } from "../types";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

const handleRead = (id:string,state:string|number) => {
  router.push({
    name: "company",
    query: {
     id:id,
     state:state,
     cq:1
    },
  });
};
const handleRead2 = (id:string,state:string|number) => {
  router.push({
    name: "company",
    query: {
     id:id,
     state:state,
     cq:2
    },
  });
};
const handleRead3 = (id:string,state:string|number) => {
  router.push({
    name: "company",
    query: {
     id:id,
     state:state,
     cq:3
    },
  });
};

const handleRead4 = (id:string,state:string|number) => {
  router.push({
    name: "company",
    query: {
     id:id,
     state:state,
     cq:4
    },
  });
};



const handleAll = () => {
  router.push({
    name: "baseform",
    query: {

    },
  });
};
const handleAll1 = () => {
  router.push({
    name: "form1",
    query: {
   
    },
  });
};
const handleAll2 = () => {
  router.push({
    name: "form2",
    query: {
    
    },
  });
};
const handleAll3 = () => {
  router.push({
    name: "form3",
    query: {
    
    },
  });
};


			
const lists= ref<Door[]>([
		{id: '1',name: "2号",state:"0"},
		{id: '2',name: "3号",state:"0"},
		{id: '3',name: "4号",state:"0"},
		{id: '4',name: "5号",state:"1"},
		{id: '5',name: "6号",state:"0"},
		{id: '6',name: "7号",state:"0"},
		{id: '7',name: "8号",state:"0"},
		{id: '8',name: "9号",state:"1"},
		{id: '9',name: "9号",state:"0"},
		{id: '10',name: "10号",state:"0"},
		{id: '11',name: "11号",state:"0"},
		{id: '12',name: "12号",state:"0"},
		{id: '13',name: "六号",state:"1"},
		{id: '14',name: "三号",state:"0"},
		{id: '15',name: "四号",state:"0"},
		{id: '16',name: "五号",state:"0"},
		{id: '17',name: "六号",state:"0"},
		{id: '18',name: "三号",state:"0"},
		{id: '19',name: "四号",state:"0"},
		{id: '20',name: "五号",state:"1"},
		{id: '21',name: "六号",state:"0"},
    
    ])
  const lists2= ref<Door[]>([
		{id: '1',name: "1号",state:"0"},
		{id: '2',name: "2号",state:"0"},
		{id: '3',name: "3号",state:"0"},
		{id: '4',name: "4号",state:"0"},
		{id: '5',name: "5号",state:"0"},
		{id: '6',name: "6号",state:"0"},
		{id: '7',name: "7号",state:"1"},
		{id: '8',name: "8号",state:"0"},
		{id: '9',name: "9号",state:"0"},

    ])
      const lists3= ref<Door[]>([
		{id: '1',name: "1号",state:"0"},
		{id: '2',name: "2号",state:"0"},
		{id: '3',name: "3号",state:"0"},
		{id: '4',name: "4号",state:"0"},
		{id: '5',name: "5号",state:"0"},
		{id: '6',name: "6号",state:"0"},
		{id: '7',name: "7号",state:"0"},
		{id: '8',name: "8号",state:"1"},
		{id: '9',name: "9号",state:"0"},
    {id: '10',name: "10号",state:"0"},
		{id: '11',name: "11号",state:"0"},
		{id: '12',name: "12号",state:"1"},
		

    ])

     const lists4= ref<Door[]>([
		{id: '1',name: "1号",state:"0"},
		{id: '2',name: "2号",state:"0"},
		{id: '3',name: "3号",state:"0"},
		{id: '4',name: "4号",state:"0"},
		{id: '5',name: "5号",state:"0"},
		{id: '6',name: "6号",state:"0"},
		{id: '7',name: "7号",state:"1"},
		{id: '8',name: "8号",state:"0"},
		{id: '9',name: "9号",state:"0"},
    {id: '10',name: "10号",state:"1"},
		{id: '11',name: "11号",state:"0"},
		
		

    ])
methods:{
		 //点击图片切换（显示及隐藏）
 		// getOperate(){
    	//  this.userShow = !this.userShow;
  		//  }
	}

</script>

<style>
.pro_info {
  position: absolute;
  width: 100%;
  height: 100%;
}
.pro_info .top {
  width: 100%;
  height: 50%;
  background-color: yellow;
}
.pro_info .bottom {
  background: #d9c666;
  width: 100%;
  height: 50%;
}

.left {
  width: 50%;
  height: 100%;
  float: left;
}

.top .left {
  background-color: black;
}
.top .right {
  background-color: black;
}

.right {
  float: left;
  width: 50%;
  height: 100%;
}

.bottom .left {
  background-color: black;
}

.bottom .right {
  background-color: black;
}
.kuang{
  background-color:#262626;
  width: 96%;
  height: 96%;
  margin: 2%;
  border-radius: 20px;
}
.my-image {
  width: 40px;
  height: 40px;
}
@keyframes fade {
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
@-webkit-keyframes fade {    
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
.headerBox {    
    color: #fff;       
    animation: fade 600ms infinite;    
    -webkit-animation: fade 600ms infinite;
}
</style>

